<template>
  <div class="tags_view">
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item
        v-for="item in Breadcrumb"
        :key="item.path"
        :to="toPath(item)"
        class="title"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'TagsView',
  data () {
    return {
      Breadcrumb: []

    }
  },
  created () {
    this.genBreadcrumb(this.$route)
  },
  watch: {
    $route () {
      this.genBreadcrumb(this.$route)
    }
  },
  methods: {
    toPath (item) {
      // console.log('path::: ', item.meta)
      // 如果路径相同，点击导航则不跳转
      if (item.path === this.$route.path) {
        return ''
      }
      // 如果是固定路由，则不跳转
      if (item.meta.affix) {
        return ''
      } else {
        // 跳转路由
        return item.path
      }
    },
    genBreadcrumb (route) {
      // console.log('route::: ', route);
      // 获取含有title属性的路由。
      const matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      )
      this.Breadcrumb = matched
    }
  }
}
</script>

<style lang="scss" scoped>
.tags_view {
  padding: 15px 0 20px 15px;
}

.tags_view .title {
  font-size: 16px !important;
}
</style>
